<template>
  <div class="countDownWrap">
    <slot :text="time | change">
      <button class="countDownDefaultBtn">{{ time | change }}</button>
    </slot>
  </div>
</template>
<script>
  export default {
    props: {
      start: {
        type: Boolean
      }
    },
    data () {
      return {
        time: '获取验证码'
      }
    },
    watch: {
      start (value, oldvalue) {
        if (value === true) {
          this.cuntDown()
        }
      }
    },
    methods: {
      cuntDown () {
        this.time = 60
        let timer = setInterval(() => {
          this.time--
          if (this.time === 0) {
            this.$emit('countDown')
            this.time = '获取验证码'
            clearInterval(timer)
          }
        }, 1000)
      }
    },
    filters: {
      change (value) {
        if (!value) return ''
        if (!isNaN(value)) {
          return `${value}s后重新获取`
        } else {
          return value
        }
      }
    },
    mounted () {

    }
  }
</script>
<style lang="stylus" scoped>
  .countDownWrap
    display inline-block
  .countDownDefaultBtn
    background transparent
    border 0.1rem solid #0DAB6C
    color #0DAB6C
    padding .0 1rem
    text-align center
    line-height 2.5rem
    border-radius 0.4rem
    outline none
</style>

